<!-- 企业对比 -->
<template>
  <view class="comparison_page screen-width">
    <view class="search_bar">
      <!-- <view></view> -->
      <view class="search_input">
        <view class="search_L">
          <input v-model="companyName" type="text" placeholder="请输入企业名称" @input="chandleClick" />
        </view>
        <view class="search_R" @tap="addConpanyName">搜索</view>
      </view>
      <view v-if="companyNameList.length && companyName" class="search_result">
        <view class="result-list">
          <view v-for="(item, index) in companyNameList" :key="index" class="result-item" @tap="selectItem(item.companyName, item.companyId)">
            <view v-html="item.companyName"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 没有搜索结果 -->
    <view v-if="!companyNameList.length" class="no_result">
      <view class="text">专利缴费示例</view>
      <image src="@/static/patent-detail.png" />
    </view>
  </view>
</template>

<script>
  import { companyList } from '@/util/api/es.js'
  import { isWeixin, wxShareConfig } from '@/util/wx.js'
  export default {
    components: {},
    data() {
      return {
        companyName: '', // 企业名称的关键字
        pageIndex: 0, // 页码数
        companyNameList: [], // 搜索结果
        width: 60,
      }
    },
    onLoad(e) {
      if (JSON.stringify(e) != '{}') {
        this.selectItem(e.companyName, e.id)
      }
      let token = this.$getToken()
      if (!token) {
        uni.showToast({
          title: '请登录后操作！',
          duration: 2000,
          icon: 'none',
        })
        setTimeout(() => {
          uni.setStorageSync('pageUrl', window.location.href)
          uni.navigateTo({
            url: '/pages/login/index',
          })
        }, 1000)
      }
    },
    onShow() {
      if (isWeixin()) {
        this.initShareConfig()
      }
    },
    methods: {
      // 获取企业名称
      getCompanyName() {
        let obj = {
          area: '',
          city: '',
          companyId: '',
          companyName: this.companyName,
          endLat: 0,
          endLng: 0,
          pageIndex: this.pageIndex,
          pageSize: 10,
          province: '',
          startLat: 0,
          startLng: 0,
        }
        companyList(obj).then(res => {
          let { retCode, data } = res
          if (retCode == 0 && data.content.length) {
            this.companyNameList = data.content
            this.$changeText(data.content, 'companyName', this.companyName)
          } else if (res.code == 10005) {
            uni.showModal({
              title: '提示',
              content: '企业查询数量已满',
              success: function (res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pages/VIP/index',
                  })
                }
              },
            })
          } else if (retCode == 0 && !data.content.length) {
            uni.showToast({
              title: '找不到您要查找的企业',
              duration: 2000,
              icon: 'none',
            })
            this.companyNameList = []
          }
        })
      },
      //搜索
      addConpanyName() {
        uni.navigateTo({
          url: `/pages/patent/patentList/Index?&name=${this.companyName}`,
        })
      },

      // 监听input框的值
      chandleClick() {
        this.getCompanyName()
      },

      // 选中城市
      selectItem(val, id) {
        val = this.$matcheHTML(val) // 去除html标签
        uni.navigateTo({
          url: `/pages/patent/patentList/Index?id=${id}&name=${val}`,
        })
      },
      initShareConfig() {
        let windowurl = window.location.href.split('#')[0]
        uni.request({
          url: 'https://oldm.51bmj.cn/WeiXin/GetClientSign', //仅为示例，并非真实接口地址。
          data: {
            rawUrl: windowurl,
          },
          dataType: 'json',
          header: {
            'X-Requested-With': 'XMLHttpRequest',
          },
          method: 'GET',
          success: res => {
            if (res.statusCode == 200) {
              let { data } = res
              let shareInfo = {
                title: '专利查询',
                desc: '关注企业，专利年费实时监控',
                link: window.location.href,
              }
              wxShareConfig(this.$wx, data, shareInfo)
            }
          },
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .van-swipe-cell__left,
  .van-swipe-cell__right {
    display: inline-block;
    width: 65px;
    height: 44px;
    font-size: 15px;
    line-height: 44px;
    color: #fff;
    text-align: center;
    background-color: #f44;
  }
  .comparison_page {
    .search_bar {
      position: relative;
      .search_input {
        background-color: #fff;
        //   height: 120upx;
        padding: 20upx 30upx;
        display: flex;
        align-content: center;
        justify-content: space-between;
        .search_L {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 6upx;
          flex: 1;
          background-color: #f8f8f8;
          padding: 0 15upx;
          input {
            height: 80rpx;
            flex: 1;
          }
        }
        .search_R {
          width: 140upx;
          height: 80upx;
          background-color: #1678ff;
          color: #fff;
          margin-left: 20upx;
          border-radius: 10upx;
          line-height: 80upx;
          text-align: center;
          // margin: 0 20upx;
          font-size: 28upx;
        }
      }
      .search_result {
        position: absolute;
        z-index: 999;
        top: 130upx;
        background-color: #fff;
        max-height: 800upx;
        width: 100%;
        padding: 0 30upx;
        box-sizing: border-box;
        overflow-y: auto;
        .result-list {
          .result-item {
            line-height: 60upx;
            height: 60upx;
            border-bottom: 1upx solid #ccc;
            view {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; //限制行数
              overflow: hidden; //超出部分隐藏
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .search_content {
      position: relative;
      min-height: 700upx;
      .choose {
        padding-left: 30upx;
        height: 80upx;
        background-color: #fff6ef;
        color: #ff7648;
        font-size: 28upx;
        display: flex;
        align-items: center;
      }
      text {
        padding-left: 30upx;
        height: 80upx;
        font-size: 28upx;
        display: flex;
        align-items: center;
      }
      .startComparison {
        position: absolute;
        bottom: 0;

        right: 50%;
        transform: translateX(50%);
        margin: 100upx auto 0;
        width: 290upx;
        height: 80upx;
        background-color: #1678ff;
        font-size: 28upx;
        color: #fff;
        border-radius: 10upx;
        line-height: 80upx;
        text-align: center;
      }
    }

    .no_result {
      min-height: calc(100vh - 80upx);
      display: flex;
      align-items: center;
      padding-top: 108upx;
      flex-direction: column;
      image {
        width: 100%;
        height: 1660upx;
      }
      .text {
        font-size: 32upx;
        margin-bottom: 10upx;
        color: #1678ff;
      }
    }
  }
</style>
